<template>
  <div  class="page-layout">
    <h1>DvChart</h1>
    <p>基础图表组件（万能图表）， 属性见 图表简介， 属性"options" 配置图表。配置方式见echart</p>

    <h2>example1</h2>
    <div>
      测试 fit 属性与 resize功能： 
      <label>fit: </label>
      <input type="checkbox" name="fit" v-model="fit" /> 
      <label>resize: </label>
      <input type="checkbox" name="resize" v-model="resize" /> 
    </div>
     
    <div class="demo-box" :style="{width: resize ? '800px' : '1200px', height:'500px', border: '1px solid'}"  >
      <dv-chart :options="opts" :fit="fit"  style="border: 1px solid"></dv-chart>
    </div>

    <h2>example2</h2>
    <div>theme = dark</div>
    <div style="width: 800px; height: 400px; border: 1px solid"  >
      <dv-chart :options="opts" fit  theme="dark"></dv-chart>
    </div>

    <h2>example3</h2>
    <div>结合DvPage</div>
    <div style="width: 1000px;  ">
      <demo-warp>
        <dv-page target="parent" fit>
          <dv-box x-align="center" y-align="middle" width="70%" height="80%"  >
            <dv-chart :options="opts" fit  ></dv-chart>
          </dv-box>
        </dv-page>
      </demo-warp>
    </div> 
  </div>

</template>
<script setup lang="ts" >
import {DvChart, DvBox, DvPage} from '$comp/index';
import {ref} from 'vue'
const opts = ref({
  title: {
      text: 'ECharts 入门示例'
  },
  tooltip: {},
  legend: {
      data:['销量']
  },
  xAxis: {
      data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  },
  yAxis: {},
  series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
  }]
})
const fit = ref(false)
const resize = ref(false)
// import demoWarp from '@/components/demo-warp.vue';
</script>
<style lang="scss" scoped>
 .page-layout{
  height: 100%;
  .demo-box{

  }
 }
</style>